import {Note} from '../_component/note.jsx'

export const info = {
  author: [
    {github: 'wooorm', name: 'Titus Wormer'}
  ],
  modified: new Date('2025-01-27'),
  published: new Date('2021-10-05')
}
export const navSortSelf = 2

# Getting started

This article explains how to integrate MDX into your project.
It shows how to use MDX with your bundler and JSX runtime of choice. {/* more */}
To understand how the MDX format works,
we recommend that you start with [§ What is MDX][what].
See [§ Using MDX][use] when you’re all set up and ready to use MDX.

## Contents

* [Prerequisites](#prerequisites)
* [Quick start](#quick-start)
  * [Bundler](#bundler)
  * [JSX](#jsx)
  * [Editor](#editor)
  * [Types](#types)
  * [Security](#security)
* [Integrations](#integrations)
  * [Bundlers](#bundlers)
  * [Build systems](#build-systems)
  * [Compilers](#compilers)
  * [Site generators](#site-generators)
  * [JSX runtimes](#jsx-runtimes)
  * [JavaScript engines](#javascript-engines)
* [Further reading](#further-reading)

## Prerequisites

MDX relies on JSX,
so it’s required that your project supports JSX as well.
Any JSX runtime (React, Preact, Vue, etc.) will do.
Note that we do compile JSX to JavaScript for you so you don’t have to set that
up.

All `@mdx-js/*` packages are written in modern JavaScript.
A [Node.js][node-js] version of 16 or later is needed to use them.
Our packages are also [ESM only][github-gist-esm].

<Note type="info">
  **Note**: Using Rust instead of Node.js?
  Try [`mdxjs-rs`][mdxjs-rs]!
</Note>

## Quick start

### Bundler

MDX is a language that’s compiled to JavaScript.
(We also compile regular markdown to JavaScript.)
The easiest way to get started is to use an integration for your bundler if you
have one:

* if you use **esbuild** (or Bun),
  install and configure [`@mdx-js/esbuild`][mdx-esbuild]
* if you use **Rollup** (or Vite),
  install and configure [`@mdx-js/rollup`][mdx-rollup]
* if you use **webpack** (or Next.js),
  install and configure [`@mdx-js/loader`][mdx-loader]

You can also use MDX without bundlers:

* you can import MDX files in **Node.js** with
  [`@mdx-js/node-loader`][mdx-node-loader]
* you can use our core compiler [`@mdx-js/mdx`][mdx-mdx] to compile MDX files
* you can use our core compiler [`@mdx-js/mdx`][mdx-mdx] to
  [evaluate][api-evaluate] (compile *and run*) MDX files

For more info on these tools,
see their dedicated sections:
[¶ Next.js][site-generator-next],
[¶ Node.js][js-engine-node],
[¶ Rollup][bundler-rollup],
[¶ Vite][build-system-vite],
[¶ esbuild][bundler-esbuild], and
[¶ webpack][bundler-webpack].

### JSX

Now you’ve set up an integration or `@mdx-js/mdx` itself,
it’s time to configure your JSX runtime.

* if you use **React**,
  that’s the default;
  optionally install and configure [`@mdx-js/react`][mdx-react]
* if you use **Preact**,
  set [`jsxImportSource` in `ProcessorOptions`][api-processor-options] to
  `'preact'`;
  optionally install and configure [`@mdx-js/preact`][mdx-preact]
* if you use **Svelte**,
  install [`svelte-jsx`][svelte-jsx],
  and set [`jsxImportSource` in `ProcessorOptions`][api-processor-options] to
  `'svelte-jsx'`
* if you use **Vue**,
  set [`jsxImportSource` in `ProcessorOptions`][api-processor-options] to
  `'vue'`;
  optionally install and configure [`@mdx-js/vue`][mdx-vue]
* if you use **Solid**,
  set [`jsxImportSource` in `ProcessorOptions`][api-processor-options] to
  `'solid-js/h'`
* if you use **Emotion**,
  set [`jsxImportSource` in `ProcessorOptions`][api-processor-options] to
  `'@emotion/react'`
* if you use **Theme UI**,
  install and configure [`@mdx-js/react`][mdx-react],
  then wrap your MDX content in a `<ThemeProvider />`

Other JSX runtimes are supported by setting
[`jsxImportSource` in `ProcessorOptions`][api-processor-options].

For more info on these tools,
see their dedicated sections:
[¶ Emotion][jsx-runtime-emotion],
[¶ Preact][jsx-runtime-preact],
[¶ React][jsx-runtime-react],
[¶ Solid][jsx-runtime-solid],
[¶ Svelte][jsx-runtime-svelte],
[¶ Theme UI][jsx-runtime-theme-ui], and
[¶ Vue][jsx-runtime-vue].

### Editor

You can enhance the experience of using MDX by adding support of it to your
editor:

* if you use **VS Code**,
  try [`mdx-js/mdx-analyzer`][mdx-analyzer]
* if you use **Vim**,
  try [`jxnblk/vim-mdx-js`][vim-mdx-js]
* if you use **Sublime Text**,
  try [`jonsuh/mdx-sublime`][mdx-sublime]
* if you use **JetBrains IntelliJ/WebStorm**,
  try [`JetBrains/mdx-intellij-plugin`][mdx-intellij-plugin]

The syntax highlighting that powers our VS Code extension and that is used
to highlight code blocks on GitHub is maintained at
[`wooorm/markdown-tm-language`][markdown-tm-language].

### Types

<details>
  <summary>Expand example of typed imports</summary>

  First install the package:

  ```sh
  npm install @types/mdx
  ```

  …TypeScript should automatically pick it up:

  ```js twoslash path="example.js"
  // @filename: types.d.ts
  import type {} from 'mdx'
  // @filename: example.js
  // ---cut---
  import Post from './post.mdx' // `Post` is now typed.
  ```
</details>

Our packages are typed with [TypeScript][].
For types to work,
the `JSX` namespace must be typed.
This is done by installing and using the types of your framework,
such as [`@types/react`][definitely-typed-react],
then augmenting the `mdx/types.js` module.

```ts twoslash path="example.ts"
import * as React from 'react'

declare module 'mdx/types.js' {
  export import JSX = React.JSX
}
```

To enable types for imported `.mdx`, `.md`, etc.,
install and use [`@types/mdx`][definitely-typed-mdx].
This package also exports several useful types,
such as `MDXComponents` which represents the `components` prop.
You can import them like so:

```ts twoslash path="example.ts"
import type {MDXComponents} from 'mdx/types.js'
```

### Security

MDX is a programming language.
If you trust your authors,
that’s fine.
If you don’t,
it’s unsafe.

Do not let random people from the internet write MDX.
If you do,
you might want to look into using `<iframe>`s with `sandbox`,
but security is hard,
and that doesn’t seem to be 100%.
For Node.js,
[vm2][] sounds interesting.
But you should probably also sandbox the whole OS using Docker or similar,
perform rate limiting,
and make sure processes can be killed when taking too long.

## Integrations

### Bundlers

#### esbuild

<details>
  <summary>Expand example</summary>

  ```js twoslash path="example.js"
  import mdx from '@mdx-js/esbuild'
  import esbuild from 'esbuild'

  await esbuild.build({
    entryPoints: ['index.mdx'],
    format: 'esm',
    outfile: 'output.js',
    plugins: [mdx({/* jsxImportSource: …, otherOptions… */})]
  })
  ```
</details>

We support [esbuild][].
Install and configure the esbuild plugin [`@mdx-js/esbuild`][mdx-esbuild].
[Configure your JSX runtime][jsx] depending on which one (React, Preact, Vue,
etc.) you use.

To use more modern JavaScript features than what your users support,
[configure esbuild’s `target`][esbuild-target].

See also [¶ Bun][javascript-engines-bun],
which you might be using,
for more info.

#### Rollup

<details>
  <summary>Expand example</summary>

  ```js twoslash path="rollup.config.js"
  /**
   * @import {RollupOptions} from 'rollup'
   */

  import mdx from '@mdx-js/rollup'
  import {babel} from '@rollup/plugin-babel'

  /** @type {RollupOptions} */
  const config = {
    // …
    plugins: [
      // …
      mdx({/* jsxImportSource: …, otherOptions… */}),
      // Babel is optional:
      babel({
        // Also run on what used to be `.mdx` (but is now JS):
        extensions: ['.js', '.jsx', '.cjs', '.mjs', '.md', '.mdx'],
        // Other options…
      })
    ]
  }

  export default config
  ```
</details>

We support [Rollup][].
Install and configure the Rollup plugin [`@mdx-js/rollup`][mdx-rollup].
[Configure your JSX runtime][jsx] depending on which one (React, Preact, Vue,
etc.) you use.

To use more modern JavaScript features than what your users support,
[install and configure `@rollup/plugin-babel`][mdx-rollup-babel].

See also [¶ Vite][build-system-vite],
if you use Rollup through it,
for more info.

#### Webpack

<details>
  <summary>Expand example</summary>

  ```js twoslash path="webpack.config.js"
  /**
   * @import {Options} from '@mdx-js/loader'
   * @import {Configuration} from 'webpack'
   */

  /** @type {Configuration} */
  const webpackConfig = {
    module: {
      // …
      rules: [
        // …
        {
          test: /\.mdx?$/,
          use: [
            // Babel is optional:
            {loader: 'babel-loader', options: {}},
            {
              loader: '@mdx-js/loader',
              /** @type {Options} */
              options: {/* jsxImportSource: …, otherOptions… */}
            }
          ]
        }
      ]
    }
  }

  export default webpackConfig
  ```
</details>

We support [webpack][].
Install and configure the webpack loader [`@mdx-js/loader`][mdx-loader].
[Configure your JSX runtime][jsx] depending on which one (React, Preact, Vue,
etc.) you use.

To use more modern JavaScript features than what your users support,
[install and configure `babel-loader`][mdx-loader-babel].

See also [¶ Next.js][site-generator-next],
if you use webpack through it,
for more info.

### Build systems

#### Vite

<details>
  <summary>Expand example</summary>

  ```js twoslash path="vite.config.js"
  import mdx from '@mdx-js/rollup'
  import {defineConfig} from 'vite'

  const viteConfig = defineConfig({
    plugins: [
      mdx(/* jsxImportSource: …, otherOptions… */)
    ]
  })

  export default viteConfig
  ```
</details>

We support [Vite][].
Install and configure the Rollup plugin [`@mdx-js/rollup`][mdx-rollup].
[Configure your JSX runtime][jsx] depending on which one (React, Preact, Vue,
etc.) you use.

To use more modern JavaScript features than what your users support,
[configure Vite’s `build.target`][vite-build-target].

<Note type="info">
  **Note**: If you also use `@vitejs/plugin-react`,
  you must force `@mdx-js/rollup` to run in the `pre` phase before it:

  ```js twoslash path="vite.config.js"
  import mdx from '@mdx-js/rollup'
  import react from '@vitejs/plugin-react'
  import {defineConfig} from 'vite'
  // ---cut---
  // …
  const viteConfig = defineConfig({
    plugins: [
      {enforce: 'pre', ...mdx({/* jsxImportSource: …, otherOptions… */})},
      react({include: /\.(jsx|js|mdx|md|tsx|ts)$/})
    ]
  })
  // …
  ```
</Note>

See also [¶ Rollup][bundler-rollup] which is used in Vite and see
[¶ Vue][jsx-runtime-vue] if you’re using that,
for more info.

### Compilers

#### Babel

<details>
  <summary>Expand plugin and sample use</summary>

  This plugin:

  ```js twoslash path="plugin.js"
  /**
   * @import {ParseResult, ParserOptions} from '@babel/parser'
   * @import {File} from '@babel/types'
   * @import {Program} from 'estree'
   * @import {Plugin} from 'unified'
   */

  import parser from '@babel/parser'
  import {compileSync} from '@mdx-js/mdx'
  import estreeToBabel from 'estree-to-babel'

  /**
   * Plugin that tells Babel to use a different parser.
   */
  export function babelPluginSyntaxMdx() {
    return {parserOverride: babelParserWithMdx}
  }

  /**
   * Parser that handles MDX with `@mdx-js/mdx` and passes other things through
   * to the normal Babel parser.
   *
   * @param {string} value
   * @param {ParserOptions} options
   * @returns {ParseResult<File>}
   */
  function babelParserWithMdx(value, options) {
    /** @type {string | undefined} */
    // @ts-expect-error: babel changed the casing at some point and the types are out of date.
    const filename = options.sourceFilename || options.sourceFileName

    if (filename && /\.mdx?$/.test(filename)) {
      // Babel does not support async parsers, unfortunately.
      const file = compileSync(
        {value, path: options.sourceFilename},
        {recmaPlugins: [recmaBabel] /* jsxImportSource: …, otherOptions… */}
      )
      return /** @type {ParseResult<File>} */ (file.result)
    }

    return parser.parse(value, options)
  }

  /**
   * A “recma” plugin is a unified plugin that runs on the estree (used by
   * `@mdx-js/mdx` and much of the JS ecosystem but not Babel).
   * This plugin defines `'estree-to-babel'` as the compiler,
   * which means that the resulting Babel tree is given back by `compileSync`.
   *
   * @type {Plugin<[], Program, unknown>}
   */
  function recmaBabel() {
    // @ts-expect-error: `Program` is similar enough to a unist node.
    this.compiler = compiler

    /**
     * @param {Program} tree
     * @returns {unknown}
     */
    function compiler(tree) {
      // @ts-expect-error: TS2349: This expression *is* callable, `estreeToBabel` types are wrong.
      return estreeToBabel(tree)
    }
  }
  ```

  …can be used like so with the Babel API:

  ```js twoslash path="example.js"
  /// <reference types="node" />
  // ---cut---
  // @filename: plugin.js
  /**
   * @import {ParseResult, ParserOptions} from '@babel/parser'
   * @import {File} from '@babel/types'
   * @import {Program} from 'estree'
   * @import {Plugin} from 'unified'
   */

  import parser from '@babel/parser'
  import {compileSync} from '@mdx-js/mdx'
  import estreeToBabel from 'estree-to-babel'

  /**
   * Plugin that tells Babel to use a different parser.
   */
  export function babelPluginSyntaxMdx() {
    return {parserOverride: babelParserWithMdx}
  }

  /**
   * Parser that handles MDX with `@mdx-js/mdx` and passes other things through
   * to the normal Babel parser.
   *
   * @param {string} value
   * @param {ParserOptions} options
   * @returns {ParseResult<File>}
   */
  function babelParserWithMdx(value, options) {
    /** @type {string | undefined} */
    // @ts-expect-error: babel types are wrong.
    const filename = options.sourceFilename || options.sourceFileName

    if (filename && /\.mdx?$/.test(filename)) {
      // Babel does not support async parsers, unfortunately.
      const file = compileSync(
        {value, path: options.sourceFilename},
        {recmaPlugins: [recmaBabel] /* jsxImportSource: …, otherOptions… */}
      )
      return /** @type {ParseResult<File>} */ (file.result)
    }

    return parser.parse(value, options)
  }

  /**
   * A “recma” plugin is a unified plugin that runs on the estree (used by
   * `@mdx-js/mdx` and much of the JS ecosystem but not Babel).
   * This plugin defines `'estree-to-babel'` as the compiler,
   * which means that the resulting Babel tree is given back by `compileSync`.
   *
   * @type {Plugin<[], Program, unknown>}
   */
  function recmaBabel() {
    // @ts-expect-error: `Program` is similar enough to a unist node.
    this.compiler = compiler

    /**
     * @param {Program} tree
     * @returns {unknown}
     */
    function compiler(tree) {
      // @ts-expect-error: TS2349: This expression *is* callable, `estreeToBabel` types are wrong.
      return estreeToBabel(tree)
    }
  }
  // @filename: example.js
  // ---cut---
  import babel from '@babel/core'
  import {babelPluginSyntaxMdx} from './plugin.js'

  const document = '# Hello, world!'

  // Note that a filename must be set for our plugin to know it’s MDX instead of JS.
  const result = await babel.transformAsync(document, {
    filename: 'example.mdx',
    plugins: [babelPluginSyntaxMdx]
  })

  console.log(result)
  ```
</details>

You should probably use Rollup or webpack instead of Babel directly as that
gives the best interface.
It is possible to use `@mdx-js/mdx` in Babel and it’s a bit faster, as it skips
`@mdx-js/mdx` serialization and Babel parsing, if Babel is used anyway.

Babel does not support syntax extensions to its parser (it has “syntax” plugins
but those only turn internal flags on or off).
It does support setting a different parser.
Which in turn lets us choose whether to use the `@mdx-js/mdx` or
`@babel/parser`.

### Site generators

#### Astro

[Astro][] has its own MDX integration.
You can add the integration with the Astro CLI: `npx astro add mdx`.

This base setup lets you import markdown, Astro components, and MDX files as
components.
See Astro’s [Framework components guide][astro-framework-components] for info
on how to use components from frameworks in your MDX files.

For more on how to combine Astro and MDX,
see [Astro’s MDX integration docs][astro-mdx].

#### Docusaurus

[Docusaurus][] supports MDX by default.
See [Docusaurus’ MDX and React guide][docusaurus-markdown-react] for info on
how to use MDX with Docusaurus.

#### Gatsby

[Gatsby][] has its own plugin to support MDX.
See [`gatsby-plugin-mdx`][gatsby-plugin-mdx] on how to use MDX with Gatsby.

#### Next.js

<details>
  <summary>Expand example</summary>

  ```js twoslash path="next.config.js"
  import nextMdx from '@next/mdx'

  const withMdx = nextMdx({
    // By default only the `.mdx` extension is supported.
    extension: /\.mdx?$/,
    options: {/* otherOptions… */}
  })

  const nextConfig = withMdx({
    // Support MDX files as pages:
    pageExtensions: ['md', 'mdx', 'tsx', 'ts', 'jsx', 'js'],
  })

  export default nextConfig
  ```
</details>

[Next.js][next] has its own MDX integration.
Install and configure [`@next/mdx`][next-mdx].

Do not use `providerImportSource` and `@mdx-js/react` with Next to inject
components.
Add an `mdx-components.tsx` (in `src/` or `/`) file instead.
See [Configuring MDX on `nextjs.org`][next-configuring-mdx] for more info.

#### Parcel

[Parcel][] has its own plugin to support MDX.
See [`@parcel/transformer-mdx`][parcel-mdx]
on how to use MDX with Parcel.

<Note type="info">
  **Note**: the official Parcel plugin is currently not maintained.
  For a maintained alternative,
  try [`parcel-transformer-mdx`][parcel-transformer-mdx].
</Note>

### JSX runtimes

#### Emotion

<details>
  <summary>Expand example</summary>

  ```js twoslash path="example.js"
  import {compile} from '@mdx-js/mdx'

  const js = String(await compile('# hi', {jsxImportSource: '@emotion/react', /* otherOptions… */}))
  ```
</details>

[Emotion][] is supported when
[`jsxImportSource` in `ProcessorOptions`][api-processor-options] is set to
`'@emotion/react'`.
You can optionally install and configure [`@mdx-js/react`][mdx-react] to
support context based component passing.

See also [¶ React][jsx-runtime-react],
which is used in Emotion,
and see [¶ Rollup][bundler-rollup] and [¶ webpack][bundler-webpack],
which you might be using,
for more info.

#### Ink

<details>
  <summary>Expand example</summary>

  ```mdx path="example.mdx"
  # Hi!
  ```

  ```js twoslash path="example.js"
  // @filename: types.d.ts
  import type {} from 'mdx'
  // @filename: example.js
  // @errors: 2769 -- something with Ink/twoslash/react getting different versions of React?
  // ---cut---
  import React from 'react'
  import {Text, render} from 'ink'
  import Content from './example.mdx' // Assumes an integration is used to compile MDX -> JS.

  render(
    React.createElement(Content, {
      components: {
        h1(properties) {
          return React.createElement(Text, {bold: true, ...properties})
        },
        p: Text
      }
    })
  )
  ```

  Can be used with:

  ```sh
  node --loader=@mdx-js/node-loader example.js
  ```
</details>

[Ink][] uses the React JSX runtime,
so set that up.
You will need to swap HTML elements out for Ink’s components.
See [§ Table of components][table-of-components] for what those are and Ink’s
docs on what they can be replaced with.

See also [¶ Node.js][js-engine-node] and [¶ React][jsx-runtime-react] for more
info.

#### Preact

<details>
  <summary>Expand example</summary>

  ```js twoslash path="example.js"
  import {compile} from '@mdx-js/mdx'

  const js = String(await compile('# hi', {jsxImportSource: 'preact', /* otherOptions… */}))
  ```
</details>

Preact is supported when [`jsxImportSource` in
`ProcessorOptions`][api-processor-options] is set to `'preact'`.
You can optionally install and configure [`@mdx-js/preact`][mdx-preact] to
support context based component passing.

See also [¶ Rollup][bundler-rollup], [¶ esbuild][bundler-esbuild], and
[¶ webpack][bundler-webpack],
which you might be using,
for more info.

#### React

React is supported by default.
You can optionally install and configure [`@mdx-js/react`][mdx-react] to
support context based component passing.

See also [¶ Rollup][bundler-rollup], [¶ esbuild][bundler-esbuild], and
[¶ webpack][bundler-webpack],
which you might be using,
for more info.

#### Theme UI

[Theme UI][theme-ui] has its own plugin to support MDX.
See [`@theme-ui/mdx`][theme-ui-mdx] on how to use MDX with Theme UI.

#### Svelte

<details>
  <summary>Expand example</summary>

  ```js twoslash path="example.js"
  import {compile} from '@mdx-js/mdx'

  const js = String(await compile('# hi', {jsxImportSource: 'svelte-jsx', /* otherOptions… */}))
  ```
</details>

Svelte is supported when [`jsxImportSource` in
`ProcessorOptions`][api-processor-options] is set to
[`'svelte-jsx'`][svelte-jsx].

See also [¶ Rollup][bundler-rollup], [¶ esbuild][bundler-esbuild], and
[¶ webpack][bundler-webpack],
which you might be using,
for more info.

#### Vue

<details>
  <summary>Expand example</summary>

  ```js twoslash path="example.js"
  import {compile} from '@mdx-js/mdx'

  const js = String(await compile('# hi', {jsxImportSource: 'vue', /* otherOptions… */}))
  ```
</details>

Vue is supported when [`jsxImportSource` in
`ProcessorOptions`][api-processor-options] is set to `'vue'`.
You can optionally install and configure [`@mdx-js/vue`][mdx-vue] to
support context based component passing.

See also [¶ Vite][build-system-vite],
which you might be using,
for more info.

#### Solid

<details>
  <summary>Expand example</summary>

  ```js twoslash path="example.js"
  import {compile} from '@mdx-js/mdx'

  const js = String(await compile('# hi', {jsxImportSource: 'solid-js/h', /* otherOptions… */}))
  ```
</details>

Solid is supported when [`jsxImportSource` in
`ProcessorOptions`][api-processor-options] is set to `'solid-js/h'`.

See also [¶ Rollup][bundler-rollup] and [¶ Vite][build-system-vite],
which you might be using,
for more info.

### JavaScript engines

#### Node.js

MDX files can be imported in Node by using
[`@mdx-js/node-loader`][mdx-node-loader].
See its readme on how to configure it.

#### Bun

MDX files can be imported in [Bun][] by using
[`@mdx-js/esbuild`][mdx-esbuild].

<details>
  <summary>Expand example</summary>

  ```toml path="bunfig.toml"
  preload = ["./bun-mdx.ts"]
  ```

  ```ts twoslash path="bun-mdx.ts"
  /// <reference types="bun-types" />
  // ---cut---
  import mdx from '@mdx-js/esbuild'
  import {type BunPlugin, plugin} from 'bun'

  await plugin(mdx() as unknown as BunPlugin)
  ```
</details>

## Further reading

* If you want to use MDX content in your project,
  see [§ Using MDX][use]
* If you’re getting errors integrating MDX,
  see [§ Troubleshooting MDX][trouble] or [§ Support][support]

[api-evaluate]: /packages/mdx/#evaluatefile-options

[api-processor-options]: /packages/mdx/#processoroptions

[astro]: https://astro.build/

[astro-framework-components]: https://docs.astro.build/en/core-concepts/framework-components/

[astro-mdx]: https://docs.astro.build/en/guides/integrations-guide/mdx/

[build-system-vite]: #vite

[bun]: https://bun.sh

[bundler-esbuild]: #esbuild

[bundler-rollup]: #rollup

[bundler-webpack]: #webpack

[definitely-typed-mdx]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/mdx

[definitely-typed-react]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react

[docusaurus]: https://docusaurus.io

[docusaurus-markdown-react]: https://docusaurus.io/docs/next/markdown-features/react

[emotion]: https://emotion.sh/docs/introduction

[esbuild]: https://esbuild.github.io

[esbuild-target]: https://esbuild.github.io/api/#target

[gatsby]: https://www.gatsbyjs.com

[gatsby-plugin-mdx]: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/

[github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[ink]: https://github.com/vadimdemedes/ink

[javascript-engines-bun]: #bun

[js-engine-node]: #nodejs

[jsx]: #jsx

[jsx-runtime-emotion]: #emotion

[jsx-runtime-preact]: #preact

[jsx-runtime-react]: #react

[jsx-runtime-solid]: #solid

[jsx-runtime-svelte]: #svelte

[jsx-runtime-theme-ui]: #theme-ui

[jsx-runtime-vue]: #vue

[markdown-tm-language]: https://github.com/wooorm/markdown-tm-language

[mdx-analyzer]: https://github.com/mdx-js/mdx-analyzer

[mdx-esbuild]: /packages/esbuild/

[mdx-intellij-plugin]: https://github.com/JetBrains/intellij-plugins/tree/master/mdx

[mdx-loader]: /packages/loader/

[mdx-loader-babel]: /packages/loader/#combine-with-babel

[mdx-mdx]: /packages/mdx/

[mdx-node-loader]: /packages/node-loader/

[mdx-preact]: /packages/preact/

[mdx-react]: /packages/react/

[mdx-rollup]: /packages/rollup/

[mdx-rollup-babel]: /packages/rollup/#combine-with-babel

[mdx-sublime]: https://github.com/jonsuh/mdx-sublime

[mdx-vue]: /packages/vue/

[mdxjs-rs]: https://github.com/wooorm/mdxjs-rs

[next]: https://nextjs.org

[next-configuring-mdx]: https://nextjs.org/docs/pages/building-your-application/configuring/mdx

[next-mdx]: https://github.com/vercel/next.js/tree/canary/packages/next-mdx

[node-js]: https://nodejs.org

[parcel]: https://parceljs.org

[parcel-mdx]: https://parceljs.org/languages/mdx/

[parcel-transformer-mdx]: https://github.com/EasyWebApp/Parcel-transformer-MDX

[rollup]: https://rollupjs.org

[site-generator-next]: #nextjs

[support]: /community/support/

[svelte-jsx]: https://github.com/kenoxa/svelte-jsx

[table-of-components]: /table-of-components/

[theme-ui]: https://theme-ui.com

[theme-ui-mdx]: https://theme-ui.com/mdx

[trouble]: /docs/troubleshooting-mdx/

[typescript]: https://www.typescriptlang.org

[use]: /docs/using-mdx/

[vim-mdx-js]: https://github.com/jxnblk/vim-mdx-js

[vite]: https://vitejs.dev

[vite-build-target]: https://vitejs.dev/guide/build.html#browser-compatibility

[vm2]: https://github.com/patriksimek/vm2

[webpack]: https://webpack.js.org

[what]: /docs/what-is-mdx/
